<template>
  <div>
    <el-row type="flex" justify="end">
      <el-select v-model="year" @change="changeFn">
        <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" @change="changeFn">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-row>
    <el-calendar v-if="isShow" v-model="calendar">
      <!-- date:单元格代表的日期
        data:有三个参数type,isSelected,day,day是格式化的日期，格式为yyyy-MM-dd
        -->
      <template v-slot:dateCell="{date,data}">
        {{ data.day | formatData }}
        <!--通过单元格代表的日期，能判断当前是否是6和0，是的话就是周六日，
            当isWeek的值为周六日的时候才渲染这个休字 -->
        <span v-if="isWeek(date)" class="week">休</span>
      </template>
    </el-calendar>

  </div>
</template>

<script>
const calendar = new Date() // 当前日期
const month = calendar.getMonth() + 1 // 当前月份
const year = calendar.getFullYear() // 当前年份
// 根据当前年份,生成前后5年年份
const yearList = []
for (let i = 0; i < 11; i++) {
  yearList.push(year - 5 + i)
}
// console.log(yearList)
export default {
  filters: {
    formatData(val) {
      // console.log(val)
      return Number(val.split('-')[2])
    }
  },
  data() {
    return {
      calendar,
      month,
      year,
      yearList,
      isShow: true // 控制日历的创建销毁
    }
  },
  watch: {
    calendar(val) {
      // 点的时候拿到时间赋值给年和月的下拉框
    //   console.log(val)
      this.year = val.getFullYear()
      this.month = val.getMonth() + 1
    },
    // 侦听语言变化this.i18n.locale
    '$i18n.locale'() {
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  },
  methods: {
    // 关联下拉日历
    changeFn() {
      this.calendar = new Date(`${this.year}-${this.month}`)
    },
    isWeek(val) {
      return val.getDay() === 6 || val.getDay() === 0
    }
  }
}
</script>

<style lang="scss" scoped>
    ::v-deep .el-calendar-day {
     height:  auto;
    }
    ::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child,  ::v-deep .el-calendar-table__row td.prev{
     border:none;
    }
   .date-content {
     height: 40px;
     text-align: center;
     line-height: 40px;
     font-size: 14px;
   }
   .date-content .rest {
     color: #fff;
     border-radius: 50%;
     background: rgb(250, 124, 77);
     width: 20px;
     height: 20px;
     line-height: 20px;
     display: inline-block;
     font-size: 12px;
     margin-left: 10px;
   }
   .date-content .text{
     width: 20px;
     height: 20px;
     line-height: 20px;
    display: inline-block;

   }
    ::v-deep .el-calendar-table td.is-selected .text{
      background: #409eff;
      color: #fff;
      border-radius: 50%;
    }
    ::v-deep .el-calendar__header {
      display: none
    }
    ::v-deep .el-calendar-day{
    position: relative;
 }
 .week{
    position: absolute;
    top:0;
    right: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: #fa7c4d;
    color: #fff;
    font-size: 12px;
 }
   </style>
